<template>
	<!-- 提现 -->
	<view>
		<view class="header">
			<view class="typeBox flex-c">
				<view class="type flex-c" v-for="(item,index) in typeList" :key="index"><text :class="currentIndex == index ? 'ac':''">{{item.name}}</text></view>
			</view>
		</view>
		<view class="add flex-bc" @click="fnToSelectPayWay()">
			<view class="flex-c">
				<image src="../../../static/user/add.png" mode=""></image>
				<text>添加提现微信号</text>
			</view>
			<uni-icons type="arrowright" size="16" color="#9698A9"></uni-icons>
		</view>
		<view class="withdarwBox">
			<view class="title">
				提现金额
			</view>
			<view class="flex-bc inputBox">
				<view class="flex inputer">
					<text>￥</text>
					<input type="text" placeholder="请输入充值金额" />
				</view>
				<view class="allBtn">
					全部提现
				</view>
			</view>
			<view class="text flex-bc">
				<text>有8996元不可提</text>
				<text style="color: #999;">查看原因</text>
			</view>
		</view>
		<view class="withdrawBtn flex-c">
			<text>提现</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				typeList: [{
						name: '提现到微信'
					},
					{
						name: '提现到支付宝'
					},
					{
						name: '提现到银行卡'
					}
				]
			};
		},
		methods:{
			fnToSelectPayWay(){
				uni.navigateTo({
					url:`../selectPayWay/selectPayWay?type=${this.currentIndex}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;

		.header {
			height: 90rpx;
			background: #F22F29;
			width: 100%;

			.typeBox {
				height: 100%;
				background: #fff;
				border-radius: 30rpx 30rpx 0px 0px;
				color: #333;

				.type {
					flex: 1;
					padding: 0 30rpx;
					height: 100%;
					font-size: 28rpx;

					text {
						height: 100%;
						line-height: 90rpx;

					}

					.ac {
						color: #F22F29;
						border-bottom: 4rpx solid #F22F29;
					}

				}
			}
		}
		.add {
			height: 128rpx;
			background: #fff;
			padding: 0 20rpx;
		
			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 16rpx;
			}
		}
		.withdarwBox {
			padding: 0 20rpx;
			background: #fff;
			font-size: 30rpx;
			color: #333;
		
			.title {
				padding: 40rpx 0 20rpx;
			}
		
			.inputBox {
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #e3e3e3;
		
				.inputer {
					align-items: center;
		
					text {
						font-size: 48rpx;
						font-weight: bold;
					}
		
					input {
						flex: 1;
					}
		
				}
		
				.allBtn {
					color: #F22F29;
					padding: 20rpx 0;
				}
			}
		
			.text {
				padding: 30rpx 0;
			}
		}
		.withdrawBtn{
			width: 542rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #FC6655 0%, #F22F29 100%);
			border-radius: 44rpx;
			color: #fff;
			margin: 60rpx auto 0;
			font-size: 32rpx;
		}
	}
</style>
